<template>
	<view class="pay">
		<view class="money"><text class="icon">¥</text>{{money}}</view>
		<view class="lists">
			<!-- <view class="list">
				<image src="../../static/balance.png" class="icon" mode=""></image>
				<view class="info">
					<view class="t">微信支付</view>
					<view class="b">余额不足，可用余额¥10.00</view>
				</view>
				<view class="selectBox ">
					<view class="select"></view>
				</view>
			</view> -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="list" @click="type = 2">
				<image src="../../static/wx.png" class="icon" mode=""></image>
				<view class="info">
					<view class="t">微信支付</view>
				</view>
				<view class="selectBox " :class="{active: type === 2}">
					<view class="select"></view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="list" @click="type = 1">
				<image src="../../static/wx.png" class="icon" mode=""></image>
				<view class="info">
					<view class="t">微信支付</view>
				</view>
				<view class="selectBox " :class="{active: type === 1}">
					<view class="select"></view>
				</view>
			</view>
			<view class="list" @click="type = 0">
				<image src="../../static/ali.png" class="icon" mode=""></image>
				<view class="info">
					<view class="t">支付宝支付</view>
				</view>
				<view class="selectBox " :class="{active: type === 0}">
					<view class="select"></view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="list" @click="type = 4">
				<image src="https://www.stck.cc/my/dou.png" class="icona" mode=""></image>
				<view class="info">
					<view class="t">抖音支付</view>
				</view>
				<view class="selectBox " :class="{active: type === 4}">
					<view class="select"></view>
				</view>
			</view>
			<!-- #endif -->

		</view>
		<view class="btn" @click="recharge()">支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				id: '',
				// #ifdef APP-PLUS
				type: 1,
				// #endif
				// #ifdef MP-WEIXIN
				type: 2
				// #endif
				// #ifdef MP-TOUTIAO
				type: 4
				// #endif
			};
		},
		onLoad(options) {
			this.id = options.id
			this.money = options.money
		},
		methods: {
			recharge() {
				let that = this
				uni.$u.http.post('/userhire', {
					types: 'pay',
					id: this.id,
					paytype: this.type,
				}).then(res => {
					if (res.code == 1) {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							appId: res.data.pay.appId,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							paySign: res.data.pay.paySign,
							signType: res.data.pay.signType,
							timeStamp: res.data.pay.timeStamp,
							success: (e) => {
								that.$u.toast('购买成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
							},
							fail: (e) => {
								that.$u.toast('支付失败');
							}
						})
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.type == 1 ? 'wxpay' : 'alipay',
							orderInfo: res.data.pay, //微信、支付宝订单数据
							success: function(res) {
								// console.log('success:' + JSON.stringify(res));
								// alert(JSON.stringify(res));
								that.$u.toast('支付成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								that.$u.toast('支付失败');
								// alert(JSON.stringify(err));
							}
						});
						// #endif
						// #ifdef MP-TOUTIAO
						uni.requestPayment({
							orderInfo: {
								order_id: res.data.pay.data.order_id,
								order_token: res.data.pay.data.order_token
							},
							service: 5,
							getOrderStatus: e => {
								console.log(e)
							},
							success: response => {
								if (response.code == 0) {
									console.log('支付成功')
								}
							},
							fail: (e) => {
								console.log(e)
								this.toast('充值失败');
							}
						})
						// #endif
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		.btn {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			border: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx auto 0;
			width: 590rpx;
			border-radius: 44rpx;
		}

		.money {
			font-size: 88rpx;
			color: #333;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding: 60rpx 0;
			font-weight: bold;

			.icon {
				font-size: 60rpx;
				margin-bottom: 10rpx;
			}
		}

		.lists {
			.list {
				display: flex;
				align-items: center;
				padding: 20rpx 40rpx 20rpx;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}
				
				.icona {
					width: 43rpx;
					height: 53rpx;
				}

				.info {
					flex: 1;
					margin: 0 20rpx;

					.t {
						font-size: 34rpx;
						color: #333333;
					}

					.b {
						color: #999999;
						font-size: 26rpx;
					}
				}

				.selectBox {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 1px solid #999999;
					display: flex;
					align-items: center;
					justify-content: center;

					.select {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background-color: transparent;
					}
				}

				.active {
					border: 1px solid #FFCE54;

					.select {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background-color: #FFCE54;
					}
				}
			}
		}
	}
</style>
